<template>
  <div class="history">
    <div class="history-item">
      <p class="history-num">{{allmoney}}万</p>
      <p><i class="iconfont icon-jine "></i>累计支持金额</p>
    </div>
    <div class="history-item">
      <p class="history-num">{{mostMonet}}万</p>
      <p><i class="iconfont icon-jine "></i>单项最高筹集金额</p>
    </div>
    <div class="history-item">
      <p class="history-num">{{mostpeople}}万</p>
      <p><i class="iconfont icon-yonghu2 "></i>单项最高支持人数</p>
    </div>
    <div class="serach-warp">
      <div class="serach-input-warp">
        <input
          type="text"
          class="serach-input"
          v-model="nowSend"
          placeholder="请输入关键字"
          @keyup="ChangeSetInterval"
        />
        <i class="icon-sousuo iconfont"> </i>
        <div class="select-warp">
          <Select
            placeholder = "分类选择"
            style="width:80px; border:none"
            @on-change="showyouIn"
          >
            <Option v-for="(item , index) in options" 
            :value="item.cid" 
            :key="item.c_name"
            :selected="index===0"
            >
            {{
              item.c_name 
            }}
            
            </Option>
          </Select>
        </div>
      </div>
      <div class="searchBox-His"    v-if="showBox">
        <div
          class="searchBox-His-send"
          v-for="(utem, index) in selectArr"
       
          :key="index"
          @click="goPage(utem)"
        >
          {{ utem.g_name }}
        </div>

        <div v-if="selectArr.length ==0">
          无搜索结果 
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { selectIndex } from "server/commuity.js";
import { getclass } from "server/commuity.js";
export default {
  data() {
    return {
      showBox: false,
      nowSend: "",
      options: [],
      nowUse: "",
      selectArr: [],
      allmoney :'',
      mostMonet:'',
      mostpeople:'',
      timeout: -1,
    };
  },
  methods: {
    goPage(item) {
      this.$router.push({
        path: "/front/detail",
        query: {
          gid: item.gid,
        },
      });
    },
    showyouIn(value) {
      this.nowUse = value;
    },
    // 定时器函数
    ChangeSetInterval() {
      // 启动定时器之后删除定会十七
      let _this = this;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(function() {
        _this.selectIndexS();
      }, 1000);
      this.showBox = true;
    },
    selectIndexS() {
        let _this = this;
        console.log(this.nowSend.trim());
        if (!this.nowSend.trim()) {
          this.showBox = false;
          return
        }
        let sendData = {
          type: this.nowUse || 1,
          selName: this.nowSend,
        };
        selectIndex(sendData).then(function(res) {
          _this.selectArr = res.data;
        });

    },
    hideBox() {
      document.addEventListener("click", (e) => {
        // 如果当前点击的这个对象是这个模态框的话
        if (e.target.closest(".show-parent")) {
          //  那么这个模态框还是显示的
          this.showBox = true;
        } else if (!e.target.closest(".show")) {
          // 如果当前点击的这个对象是这个show按钮以外的对象，那么这个模态框就隐藏
          this.showBox = false;
        }
      });
    },
  },
  mounted() {
    // 页面加载的时候调用监听
    this.hideBox();
  },
  created() {
    let _this = this;
    console.log('我去请求');
    getclass().then(function(res){
       console.log('请求回来了');

      _this.options =res[0];
       _this.allmoney = Math.round(parseInt(res[1][0].most)/10000);
       _this.mostMonet = Math.round(parseInt(res[2][0].a)/10000);
       _this.mostpeople = parseInt(res[3][0].a)/10000;
    });
  },
};
</script>

<style scoped>
.searchBox-His-send {
  height: 30px;
  margin: 10px 0;
  line-height: 30px;
  cursor: pointer;
}
.searchBox-His-send:hover{
  background: #ccc;

}
.searchBox-His {
  width: calc(100% - 40px);
  background: white;
  position: absolute;
  float: left;

  /* right: 5.3%; */
  top: 90px;
  border: 1px solid #bbb;
  border-radius: 10px;
  border-top: none;
  /* height: 100px; */
  /* background: red; */
  z-index: 100;
  left: 20px;
  padding: 10px;
}
.history {
  height: 140px;
  /* border: 1px solid #ccc; */
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.08);
  display: flex;
}
.history-item {
  width: 250px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.history-num {
  font-weight: 500;
  color: #000;
  font-size: 32px;
  background: url("~assets/img/showNumline.png") no-repeat;
  background-position: 90% 100%;
  /* background-size: 120px ; */
}
.history-item .iconfont {
  color: #3ae0ab;
  margin-right: 5px;
}
.serach-warp {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.serach-input-warp {
  position: relative;
}
.serach-input {
  height: 40px;
  width: 400px;
  border-radius: 20px;
  /* border: none; */
  border: 1px solid #b6b6b6;
  padding-left: 100px;
}
.serach-input:focus {
  /* border: none; */
  /* border-color: #3ae0ab; */
  border-color: #808080;
}
.serach-warp .iconfont {
  position: absolute;
  right: 10px;
  top: 7px;
  color: #3ae0ab;
  font-size: 18px;
  cursor: pointer;
}
.select-warp {
  position: absolute;
  left: 10px;
  top: 4px;
}
</style>
<style>
.select-warp .ivu-select-selection {
  border: none;
}
</style>
